<template>
	<view id="community-index">
		<view class="banner">
			<view class="title-area">
				<view class="status-bar-fixed" style="height: var(--status-bar-height);">
					<!-- 所有自定义导航都要加这个，用来处理小程序显示时的手机信号那一栏的高度 -->
				</view>
				<!-- 平和五寨埔坪村 -->
			</view>
		</view>
		<view class="main-content">
			<view class="nav">
				<navigator url="../DigitalPlatform/index" class="nav-item">
					<image class="icon" :src="domain + '/static/Community/digitalPlatform.png'"></image>
					<view class="text">迁台记忆</view>
				</navigator>
				<navigator url="./CommunityCommunication?id=1a259c02-9a80-4f3c-8687-e7c04b539bf7" class="nav-item">
					<image class="icon" :src="domain + '/static/Community/attraction.png'"></image>
					<view class="text">自然环境</view>
				</navigator>
				<navigator url="./CommunityCommunication?id=16de5864-dbd3-421a-9735-5933e5a3899f" class="nav-item">
					<image class="icon" :src="domain + '/static/Community/culture.png'"></image>
					<view class="text">民俗文化</view>
				</navigator>
				<navigator url="./CommunityCommunication?id=ee90ee76-c302-4421-9025-3acdcece39b2" class="nav-item">
					<image class="icon" :src="domain + '/static/Community/community.png'"></image>
					<view class="text">旅游攻略</view>
				</navigator>
			</view>
			<view class="nav nav-2">
				<navigator class="nav-item" url="./VR">
					<image class="icon" :src="domain + '/static/Community/attractionVR.png?2'" ></image>
				</navigator>
				<navigator class="nav-item" url="./AMap">
					<image class="icon" :src="domain + '/static/Community/mapTour.png'" ></image>
				</navigator>
			</view>
			<view class="trends">
				<view class="title-area">
					<view class="title">乡村活动</view>
					<navigator class="more" url="/pages/DigitalPlatform/exchange">更多 &gt;</navigator>
				</view>
				<view class="trends-list">
					<navigator v-for="(v, k) in exchangeData" :key="k" :url="`/pages/Community/NewsDetail?uniqueCode=${v.UniqueCode}`">
						<image class="trend-item" :src="domain + v.FeaturedImage" mode="aspectFill"></image>
					</navigator>
				</view>
			</view>
			<view class="temple media">
				<view class="bg-mask"></view>
				<view class="media-body">
					<view class="title">
						家庙祠堂
					</view>
					<view class="flex">
						<navigator class="flex-item" v-for="(v, k) in templeData" url="/pages/DigitalPlatform/AncestralTemple" :key="k">
							<image class="cover" :src="domain + v.FeaturedImage" mode="aspectFill"></image>
							<view class="title">{{ v.Topic }}</view>
						</navigator>
					</view>
				</view>
			</view>
			<navigator class="tour media" url="./CommunityCommunication?id=8d243790-3336-4561-971f-5ada60b31c87">
				<view class="bg-mask"></view>
				<view class="media-body">
					历史文化
				</view>
			</navigator>
			<navigator class="community media" url="./CommunityCommunication?id=95046173-09b6-4145-bce2-3693364f0a9e" >
				<view class="bg-mask"></view>
				<view class="media-body">
					闽台交流
				</view>
			</navigator>
		</view>
	</view>
	<bottom-bar></bottom-bar>
</template>

<script setup>
	//姚珅 @ 5月18日 底部导航组件添加以及部分图片添加
	// Community Index
	import { domain } from '../../stores/useApp.js'
	import bottomBar from './bottomNavigationBar.vue'
	import { ref } from 'vue'
	import setShare from '../../share.js'
	setShare({
		title: '云上埔坪',
		path: "/pages/Community/Index"
	});
	
	let exchangeCode = "7R6wzhf2Ev7aRmPBx4VtQv";
	let templeCode = "0YFEOYZXFCyzaUwTQ2Anm8";
	let exchangeData = loadCategorySource(exchangeCode, 3);
	let templeData = loadCategorySource(templeCode, 3);
	
	function loadCategorySource (uniqueCode, pageSize) {
		let data = ref([]);
		uni.post("/api/categorySource", {
			uniqueCode,
			hasContent: false,
			page: 1,
			pageSize
		}).then(msg => {
			for (let d of msg.data) {
				data.value.push(d);
			}
		});
		return data;
	}
	
</script>

<style lang="less">
	@import url(./shared.less);
	
	#community-index {
		.banner {
			.show-bg("https://www.lin-home.com/static/Community/index-top-bg.jpg");
			height: 489rpx;
			padding-top: 40rpx;

			.title-area {
				text-align: center;
				font-size: 45rpx;
				color: #fff;
			}
		}

		.main-content {
			padding: @main-spacing;

			.nav {
				display: flex;
				justify-content: space-between;

				.nav-item {
					display: block;
					text-align: center;
					.icon {
						width: 123rpx;
						height: 123rpx;
						display: block;
						border-radius: 50%;
					}

					.text {
						width: 123rpx;
						text-align: center;
						font-size: 12px;
						margin-top: 5px;
					}
				}

				&.nav-2 {
					margin-top: @main-spacing;
					.nav-item .icon {
						width: 329rpx;
						height: 112rpx;
						border-radius: 10px;
					}
				}
			}

			// .nav

			.trends {
				margin-top: @main-spacing;
				background: #EBF3F8;
				border-radius: 10px;
				padding: 17rpx 30rpx 25rpx 30rpx;
				box-sizing: border-box;

				.title-area {
					display: flex;

					.title {
						font-size: 28rpx;
					}

					.more {
						font-size: 28rpx;
						margin-left: auto;
					}

					margin-bottom: 25rpx;
				}

				.trends-list {
					display: flex;
					justify-content: space-between;

					.trend-item {
						width: 207rpx;
						height: 146rpx;
					}
				}

				// .trends-list
			}

			.media {
				height: 204rpx;
				display: block;
				position: relative;
				margin-top: @main-spacing;
				.show-bg("https://www.lin-home.com/static/Community/main-bg.jpg");
				border-radius: 25rpx;

				.bg-mask {
					.full;
					z-index: 0;
					border-radius: 25rpx;
					background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(110, 44, 44, 0.82) 100%);
				}

				.media-body {
					z-index: 10;
					.full;
					box-sizing: border-box;
					padding: 0rpx 30rpx;
				}
			}

			.temple {
				height: 334rpx;
				.show-bg("https://www.lin-home.com/static/Community/zcjm-bg.jpg");
				.title {
					color: #fff;
					text-align: center;
					margin-top: 24rpx;
					font-size: 48rpx;
					margin-bottom: 15rpx;
				}

				.flex {
					display: flex;
					justify-content: space-between;

					.flex-item {
						width: 203rpx;
						height: 199rpx;
						background: #fff;
						border-radius: 25rpx;

						.cover {
							width: 203rpx;
							height: 144rpx;
							border-radius: 25rpx 25rpx 0 0;
							display: block;
						}

						.title {
							display: block;
							text-align: center;
							color: #000;
							font-size: 24rpx;
							line-height: 32rpx;
							margin: 10rpx 0rpx;
						}
					}

					// .flex-item
				}

				// .flex
			}

			// .temple

			.tour,
			.community {
				height: 204rpx;

				.media-body {
					color: #fff;
					font-size: 50rpx;
					line-height: 50rpx;
					width: 300rpx;
					height: 50rpx;
					margin: auto;
				}
			}
			.tour {
				.show-bg("https://www.lin-home.com/static/Community/lygl-bg.png");
			}
			.community {
				.show-bg("https://www.lin-home.com/static/Community/sqjl-bg.png");
			}
		}

		// .main-content
	}
</style>